Skip to main content

DataGrid How To's

How to's for the DataGrid guide.

How to Use DataGrid?​

How to Use DataGrid?​

The steps below describe how to add a DataGrid to a form and configure its essential properties.

1. Add the DataGrid Component to the Form​

  1. Open the form design screen.
  2. Go to the Toolbox panel.
  3. Locate the DataGrid component.
  4. Drag and drop it onto the form.

2. Configure General Properties​

When the DataGrid is selected, the Property Viewer panel appears on the right.

From this panel, you can configure:

Column Settings​

  • Add or remove columns
  • Set data types
  • Adjust width, alignment, and formatting

Data Source Binding​

  • Select a DataSource
  • Automatically generate columns

Appearance Settings​

  • Paging (pagination)
  • Sorting
  • Filtering
  • Selection mode

Action Buttons​

  • Add custom action buttons for each row

3. Configure Events​

DataGrid supports a wide range of client-side and server-side events, such as:

  • RowInserted
  • RowUpdated
  • RowRemoved
  • ToolbarButtonClick
  • ActionButtonClick
  • RowDblClick
  • SelectionChanged

Each event can be used to implement business logic or trigger operations.

4. Working with a Data Source​

To bind a DataGrid to a data source:

  1. Select the data source
  2. Click Generate Columns
  3. Adjust the generated columns as needed

The DataGrid will automatically display values from the connected dataset.

5. Common Usage Scenarios​

ScenarioDescription
Row selectionUpdate other form fields based on the selected row
Action buttonsOpen forms, start workflows, open selection dialogs
ReportingDisplay processes or records in a tabular view
Data entryAllow users to add rows to a table
Interactive operationsFiltering, sorting, and searching

Conclusion​

DataGrid is a flexible, powerful, and highly versatile table component.
When properly configured, it provides significant convenience for workflow management, reporting, and data processing.

How to Export DataGrid Data​

How to Export DataGrid Data​

Steps​

  1. Select the DataGrid component.
  2. Click the Appearance tab.
  3. Enable the Export to Excel option.
  4. Save the form.
  5. In the web interface, use the Export to Excel button.

Notes​

  • Columns marked as Disable to Export are not included in the export.
  • Exporting large data sets may take longer to complete.

How to Enable Sorting​

How to Enable Sorting in DataGrid​

Steps​

  1. Select the DataGrid component.
  2. Navigate to the Sorting Settings section.
  3. Choose a value for the Mode option:
    • none
    • single
    • multiple
  4. Ensure that the desired columns are marked as sortable.

Notes​

  • Multi-column sorting provides greater flexibility for users.
  • Sorting can be handled either client-side or server-side, depending on the configuration.

How to Enable Paging​

How to Enable Paging in DataGrid​

Steps​

  1. Select the DataGrid component.
  2. Click the Behavior tab.
  3. Navigate to the Paging Settings section.
  4. Enable the Enabled option.
  5. Set the Paging Size value.
  6. Optionally:
    • Customize the available Paging Sizes options.

Notes​

  • Paging is recommended for large data sets.
  • Paging cannot be used together with Virtual Scrolling.

How to Use Client Enabled?​

What is Client Enabled?​

Client Enabled is a property that defines whether a form control is active (enabled) on the client side when the form is first loaded.
If it is set to True, the control is immediately usable by the user.
If it is set to False, the control is disabled and cannot be interacted with until a specific condition or rule activates it.

This property is especially useful for controlling the user’s interaction flow and applying dynamic behaviors using the Rule Manager.

What Does It Do?​

The property allows developers to:

  • Control when a form control becomes interactive.
  • Prevent users from entering or changing data until prerequisites are met.
  • Dynamically enable or disable controls based on user input or logic.

Example Scenario — Conditional Activation​

Scenario:
A form contains a checkbox called “I Accept Terms” and a text field called “Signature.”
The goal is to make the “Signature” field inactive until the user checks “I Accept Terms.”

Steps to Implement:​

  1. Select the “Signature” field in the form editor.

  2. In the Properties panel, find the Client Enabled field.

  3. Set the value to False — the field will now be disabled by default when the form loads.

  4. Open the Rule Manager.

  5. Add a new rule:

    Condition:

Action:

  1. Save and publish the form.

Result:​

  • When the form loads, the “Signature” field is disabled.
  • Once the user checks “I Accept Terms,” the field automatically becomes active and editable.

Behavior Summary​

Property StateDescription
TrueThe control is active and ready for user interaction when the form loads.
FalseThe control is disabled at load time and can be enabled dynamically via rules or code.

Notes & Best Practices​

  • Use the Client Enabled property to manage client-side interactivity without requiring server actions.
  • Combine it with Rule Manager to define when and how controls become active.
  • Remember: if server enablement is disabled, the client cannot enable the control even if Client Enabled is set to True.
  • By default, this property is set to True (active).

Summary​

Client Enabled improves form usability by letting developers control when and how users interact with form controls.
It is essential for creating responsive, condition-based form experiences where user actions dynamically change the form’s state.

What Is DataGrid?​

What Is DataGrid?​

DataGrid is a highly capable form component used to display values from a data source in a table layout, allow users to select rows, perform add–update–delete operations, and interact with the data presented in the grid.

It is one of the most commonly used components in form designs and workflow applications.

Where Is It Used?​

  • Reporting screens for initiated processes
  • Displaying tabular data on forms
  • Scenarios requiring row-based operations
  • Showing data from another form as a table
  • Data selection, editing, or listing operations
  • Cases where the user must take action via grid rows

Key Features​

  • Can be bound to a data source
  • Supports adding, editing, and deleting rows
  • Column customization (type, length, format, etc.)
  • Ability to add action buttons
  • Trigger processing through events
  • Strong interaction capabilities (selection, filtering, sorting, searching)
  • Various layouts and extensible structure

Using DataGrid with a Data Source​

DataGrid can connect to a data source and automatically generate its columns.
The values displayed in the grid remain up-to-date according to the data source results.

Drag-and-Drop Placement​

When the form design screen is active:

  1. Locate DataGrid in the Toolbox panel.
  2. Drag and drop it onto the form.
  3. Click the object to configure settings through the
    General, Label, Behavior, Appearance, and Events tabs.

How to Configure DataGrid Columns​

How to Configure DataGrid Columns​

Steps​

  1. Select the DataGrid component on the form design screen.
  2. In the DataSource panel, navigate to the Columns section.
  3. Click Add to define columns manually.
  4. For each column, configure the following properties:
    • Name
    • Caption
    • Width
    • Data Type
    • Visible
    • Align
  5. Save your changes.

Notes​

  • The column order determines the display order in the table.
  • For responsive behavior, you can use Hiding Priority.

How to Enable Row Selection​

How to Enable Row Selection in DataGrid​

Steps​

  1. Select the DataGrid component.
  2. Navigate to the Selection Settings section.
  3. Enable the Enabled option.
  4. Choose a Mode:
    • Single
    • Multiple
  5. If needed, configure the Show Checkboxes option.

Notes​

  • Use Mode = Multiple to allow selecting more than one row.

How to Enable Filtering​

How to Enable Filtering in DataGrid​

Steps​

  1. Select the DataGrid component.
  2. Click the Behavior tab.
  3. Navigate to the Filtering Settings section.
  4. Enable the Row Filter Enabled option.
  5. Verify the data types of the columns you want to filter.

Notes​

  • Filter options vary depending on the column data type.
  • Be mindful of performance when filtering large data sets.